
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>H+ 后台主题UI框架 - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
     <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
     <!-- jqgrid-->
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
    <link href="css/gyq.css" rel="stylesheet">
    <link rel="stylesheet" href="css/demo.css" type="text/css">
    <style>
    </style>
</head>

<body style="color:#333;padding:3px;">
    <!-- 标题 -->
    <div class="page-heade">
        <h2 class="title_color text-center">财年(<span>2015</span>)世纪联华骆家庄店营销费用报表-费用科目占比分析(单位：元)</h2>
    </div>
    <!-- 标题 -->
    <table class="table table-bordered" style="margin:0">
		<tr>
		 <td>温馨提示：没有显示占比的月份则表示当月所有科目的费用合计为0。</td>
		</tr>
    </table>
    <div>
    <form action=""  class="form-inline">
   <div id="mainImgDiv0" style="margin-top: 20px; height: 460px"></div>
   <div id="mainImgDiv1" style="margin-top: 20px; height: 460px"></div>
   	<div id="mainImgDiv2" style="margin-top: 20px; height: 460px"></div>
</form>
    </div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <!-- <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> -->
    <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
     <!-- <script src="js/plugins/layer/laydate/laydate.js"></script> -->
      <script src="js/plugins/echarts/echarts-all.js"></script>

      <script src="js/common.js"></script>
    <script>
        $(function(){
            /*饼状图*/
      
			var myChart = echarts.init(document.getElementById('mainImgDiv'+0)); 
			myChart.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});
		    var num=10;

		    var option = {
		    		title : {
		    	        text: '10月',
		    	        x:'center'
		    	    },
		    	    tooltip : {
		    	        trigger: 'item',
		    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    	    },
		    	    legend: {
		    	        orient : 'vertical',
		    	        x : 'left',
		    	        data:[{"value":51000,"name":"堆头费"},{"value":60000,"name":"端架"},{"value":3000,"name":"DM费"},{"value":"0","name":"导购工资"},{"value":"0","name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":"0","name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":300000,"name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":"0","name":"消费者价格折扣"},{"value":10368,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}]
		    	    },
		    	    toolbox: {
		    	        show : true,
		    	        feature : {
		    	            mark : {show: true},
		    	            dataView : {show: true, readOnly: false},
		    	            magicType : {
		    	                show: true, 
		    	                type: ['pie', 'funnel'],
		    	                option: {
		    	                    funnel: {
		    	                        x: '25%',
		    	                        width: '50%',
		    	                        funnelAlign: 'left',
		    	                        max: 1548
		    	                    }
		    	                }
		    	            },
		    	            restore : {show: true},
		    	            saveAsImage : {show: true}
		    	        }
		    	    },
		    	    series : [ 
			    	        {
			    	            name:'财年(2015)10月',
			    	            type:'pie',
			    	            data:[{"value":51000,"name":"堆头费"},{"value":60000,"name":"端架"},{"value":3000,"name":"DM费"},{"value":"0","name":"导购工资"},{"value":"0","name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":"0","name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":300000,"name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":"0","name":"消费者价格折扣"},{"value":10368,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}] 
			    	        }
				    	    
							,
							
		    	    ]
		    	};
				         
		    // ajax callback
			myChart.hideLoading();
		    // 为echarts对象加载数据 
		    myChart.setOption(option); 
		   var myChart = echarts.init(document.getElementById('mainImgDiv'+1)); 
			myChart.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});
		    var num=10;

		    var option = {
		    		title : {
		    	        text: '11月',
		    	        x:'center'
		    	    },
		    	    tooltip : {
		    	        trigger: 'item',
		    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    	    },
		    	    legend: {
		    	        orient : 'vertical',
		    	        x : 'left',
		    	        data:[{"value":51000,"name":"堆头费"},{"value":60000,"name":"端架"},{"value":3000,"name":"DM费"},{"value":"0","name":"导购工资"},{"value":"0","name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":"0","name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":300000,"name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":"0","name":"消费者价格折扣"},{"value":10368,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}]
		    	    },
		    	    toolbox: {
		    	        show : true,
		    	        feature : {
		    	            mark : {show: true},
		    	            dataView : {show: true, readOnly: false},
		    	            magicType : {
		    	                show: true, 
		    	                type: ['pie', 'funnel'],
		    	                option: {
		    	                    funnel: {
		    	                        x: '25%',
		    	                        width: '50%',
		    	                        funnelAlign: 'left',
		    	                        max: 1548
		    	                    }
		    	                }
		    	            },
		    	            restore : {show: true},
		    	            saveAsImage : {show: true}
		    	        }
		    	    },
		    	    series : [ 
			    	        {
			    	            name:'财年(2015)11月',
			    	            type:'pie',
			    	            data:[{"value":43240,"name":"堆头费"},{"value":11000,"name":"端架"},{"value":22000,"name":"DM费"},{"value":"0","name":"导购工资"},{"value":17000,"name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":5009000,"name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":100000,"name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":10620,"name":"消费者价格折扣"},{"value":3748,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}] 
			    	        }
				    	    
							,
							
		    	    ]
		    	};
				         
		    // ajax callback
			myChart.hideLoading();
		    // 为echarts对象加载数据 
		    myChart.setOption(option); 
		    	var myChart = echarts.init(document.getElementById('mainImgDiv'+2)); 
			myChart.showLoading({
			    text: '正在努力的读取数据中...',    //loading话术
			});
		    var num=10;

		    var option = {
		    		title : {
		    	        text: '12月',
		    	        x:'center'
		    	    },
		    	    tooltip : {
		    	        trigger: 'item',
		    	        formatter: "{a} <br/>{b} : {c} ({d}%)"
		    	    },
		    	    legend: {
		    	        orient : 'vertical',
		    	        x : 'left',
		    	        data:[{"value":51000,"name":"堆头费"},{"value":60000,"name":"端架"},{"value":3000,"name":"DM费"},{"value":"0","name":"导购工资"},{"value":"0","name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":"0","name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":300000,"name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":"0","name":"消费者价格折扣"},{"value":10368,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}]
		    	    },
		    	    toolbox: {
		    	        show : true,
		    	        feature : {
		    	            mark : {show: true},
		    	            dataView : {show: true, readOnly: false},
		    	            magicType : {
		    	                show: true, 
		    	                type: ['pie', 'funnel'],
		    	                option: {
		    	                    funnel: {
		    	                        x: '25%',
		    	                        width: '50%',
		    	                        funnelAlign: 'left',
		    	                        max: 1548
		    	                    }
		    	                }
		    	            },
		    	            restore : {show: true},
		    	            saveAsImage : {show: true}
		    	        }
		    	    },
		    	    series : [ 
			    	        {
			    	            name:'财年(2015)12月',
			    	            type:'pie',
			    	            data:[{"value":4500,"name":"堆头费"},{"value":"0","name":"端架"},{"value":"0","name":"DM费"},{"value":"0","name":"导购工资"},{"value":"0","name":"条码费"},{"value":"0","name":"主题活动费用"},{"value":"0","name":"合同返利"},{"value":"0","name":"通信费"},{"value":"0","name":"交通费"},{"value":"0","name":"促销员工资"},{"value":"0","name":"新品开发费"},{"value":"0","name":"销售物料POSM"},{"value":"0","name":"消费者价格折扣"},{"value":1584,"name":"渠道价格折扣费"},{"value":"0","name":"调研费"},{"value":"0","name":"路演费"},{"value":"0","name":"媒体广告费"}] 
			    	        }
				    	    
		    	    ]
		    	};
				         
		    // ajax callback
			myChart.hideLoading();
		    // 为echarts对象加载数据 
		    myChart.setOption(option); 
    $(window).resize(myChart.resize);
  })

    </script>
</body>

</html>
